<template>
    <div class="View">
        <!-- tab切换菜单 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" class="bh-tab">
            <el-tab-pane label="工事計画" name="first">
            </el-tab-pane>
            <el-tab-pane label="目視/非破壊検査計画" name="second">
            </el-tab-pane>
            <el-tab-pane label="肉厚測定計画" name="third">
            </el-tab-pane>
        </el-tabs>
        <div class="all-content-warrper">
            <!-- 打印 、 编辑、 装置名称那栏目 坑坑坑~~~~~~~~~~ -->
            <div class="title-view">
                <div class="top-btn-view">
                    <div class="btn-box">
                        <!-- 头部下拉菜单-->
                        <div v-for="(downItem, index) in topMsBtnDownList" :key="index">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <button @click="BtnActive(index)" :class="index == downBtnActiveX
                                        ? 'tab-btn downBtnActive'
                                        : 'tab-btn'
                                        ">
                                        {{ downItem.topBtnName }}
                                    </button>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="(dropdownItem, dropdownIndex) in downItem.downList"
                                        :key="dropdownIndex" @click.native="dropDownMenu(dropdownItem, downItem.type)">
                                        <button :disabled="!dropdownItem.disabled" class="drop-btn"
                                            v-if="dropdownItem.isShow.indexOf(activeName) != -1">
                                            {{ dropdownItem.itemName }}
                                        </button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tip-view">
                <div class="btns">
                    <el-button class="bg-bottom-btn" type="primary"
                        @click="VisualDetailPlanCombox = VisualDetailPlanCombox == 'リスト' ? '図面' : 'リスト'"
                        style="width: 75px;height: 26px;">
                        {{ activeName == 'second' || activeName == 'third' ? VisualDetailPlanCombox : 'リスト' }}
                    </el-button>
                    <span class="tip-label">
                        {{ $t("message.bhView.leftComponents.device") }}
                    </span>
                    <el-select v-model="valuePlant" :placeholder="$t('message.bhView.label.placeholderSearch')
                        " class="form-ipt" @change="changePltCode">
                        <el-option v-for="item in plantOptions" :key="item.pltCode" :label="item.pltName"
                            :value="item.pltCode">
                        </el-option>
                    </el-select>
                    <span class="tip-label">
                        {{ $t("message.bhView.leftComponents.object") }}
                    </span>
                    <el-select v-model="macType" class="form-ipt" @change="changeMacType">
                        <el-option v-for="item in macTypeOption" :key="item.key" :label="item.value"
                            :value="item.key"></el-option>
                    </el-select>
                    <!-- <el-button class="bg-bottom-btn" v-if="activeName == 'third'" @click="showDialog('AUT')"
                        :disabled="isDisabled">
                        {{ $t("message.planView.btn.btn_auto") }}
                    </el-button> -->
                    <el-button type="primary" class="bg-bottom-btn" @click="showDialog('TBM')" :disabled="isDisabled">
                        {{ $t("message.planView.btn.btn_TBM") }}
                    </el-button>
                    <el-button type="primary" class="bg-bottom-btn" v-if="activeName == 'third'"
                        @click="showDialog('CBM')" :disabled="isDisabled">
                        {{ $t("message.planView.btn.btn_CBM") }}
                    </el-button>
                    <el-button type="primary" class="bg-bottom-btn" @click="showDialog('MAN')" :disabled="isDisabled">
                        {{ $t("message.planView.btn.btn_Hand") }}
                    </el-button>
                    <el-button type="primary" class="bg-bottom-btn" @click="showDialog('Renew')" :disabled="isDisabled"
                        v-if="activeName == 'third'">
                        更新計画
                    </el-button>
                    <el-button type="primary" class="bg-bottom-btn" @click="showDialog('DEL')" :disabled="isDisabled">
                        {{ $t("message.planView.btn.btn_Del") }}
                    </el-button>
                    <el-button :type="isUserNull ? '' : 'primary'" class="bg-bottom-btn" @click="showRight"
                        :class="isUserNull ? 'edit-btn' : ''">
                        {{ $t("message.planView.btn.btn_set") }}
                    </el-button>
                    <el-button class="bg-bottom-btn" @click="clearUserSet">
                        {{ $t("message.planView.btn.clear") }}
                    </el-button>
                </div>

                <el-button type="primary" class="bg-bottom-btn" @click="changeYear">
                    {{ timeFlg == 0 ? $t("message.planView.btn.year") : $t("message.planView.btn.month") }}
                </el-button>
            </div>
            <!-- 数据列表-->
            <div class="leftTabel-rightTabel-lineContent">
                <PlanContent :timeFlg="timeFlg" @getSelecData="getSelecData" v-if="activeName == 'first'"
                    ref="PlanContent" @isUserEmpty="isUserEmpty"></PlanContent>

                <MSPlanContent :timeFlg="timeFlg" :VisualDetailPlanCombox="VisualDetailPlanCombox"
                    @getSelecData="getSelecData" v-if="activeName == 'second'" ref="MSCPlanContent"
                    @isUserEmpty="isUserEmpty"></MSPlanContent>

                <MTPlanContent :timeFlg="timeFlg" :VisualDetailPlanCombox="VisualDetailPlanCombox"
                    @getSelecData="getSelecData" v-if="activeName == 'third'" ref="MTCPlanContent"
                    @isUserEmpty="isUserEmpty"></MTPlanContent>
            </div>
        </div>
        <!-- TMB计划 -->
        <TBMPlan @CloseTables="TabelCompontensFlag = 0" v-if="TabelCompontensFlag == 'TBM' && activeName == 'first'"
            :selectData="selectData" @reGetPlTableInfo="reGetPlTableInfo"></TBMPlan>
        <TBMPlanTwo @CloseTables="TabelCompontensFlag = 0" v-if="TabelCompontensFlag == 'TBM' && activeName == 'second'"
            :selectData="selectData" @reGetMSTableInfo="reGetMSTableInfo"></TBMPlanTwo>
        <TBMPlanThird @CloseTables="TabelCompontensFlag = 0"
            v-if="TabelCompontensFlag == 'TBM' && activeName == 'third'" :selectData="selectData"
            @reGetMTTableInfo="reGetMTTableInfo"></TBMPlanThird>

        <HANPlan @CloseTables="TabelCompontensFlag = 0" v-if="TabelCompontensFlag == 'MAN' && activeName == 'first'"
            :selectData="selectData" @reGetPlTableInfo="reGetPlTableInfo"></HANPlan>
        <HANPlanTwo @CloseTables="TabelCompontensFlag = 0" v-if="TabelCompontensFlag == 'MAN' && activeName == 'second'"
            :selectData="selectData" @reGetMSTableInfo="reGetMSTableInfo"></HANPlanTwo>
        <HANPlanThird @CloseTables="TabelCompontensFlag = 0"
            v-if="TabelCompontensFlag == 'MAN' && activeName == 'third'" :selectData="selectData"
            @reGetMTTableInfo="reGetMTTableInfo"></HANPlanThird>

        <RenewThird @CloseTables="TabelCompontensFlag = 0"
            v-if="TabelCompontensFlag == 'Renew' && activeName == 'third'" :selectData="selectData"
            @reGetMTTableInfo="reGetMTTableInfo"></RenewThird>

        <DelPlan @CloseTables="TabelCompontensFlag = 0" v-if="TabelCompontensFlag == 'DEL' && activeName == 'first'"
            :selectData="selectData" :activeName="activeName" @reGetPlTableInfo="reGetPlTableInfo"></DelPlan>
        <DelPlanTwo @CloseTables="TabelCompontensFlag = 0" v-if="TabelCompontensFlag == 'DEL' && activeName == 'second'"
            :selectData="selectData" :activeName="activeName" @reGetMSTableInfo="reGetMSTableInfo"></DelPlanTwo>
        <DelPlanThird @CloseTables="TabelCompontensFlag = 0"
            v-if="TabelCompontensFlag == 'DEL' && activeName == 'third'" :selectData="selectData"
            :activeName="activeName" @reGetMTTableInfo="reGetMTTableInfo"></DelPlanThird>

        <AUTPlan @CloseTables="TabelCompontensFlag = 0" v-if="TabelCompontensFlag == 'AUT'"></AUTPlan>
        <CBMPlan @CloseTables="TabelCompontensFlag = 0" v-if="TabelCompontensFlag == 'CBM'" :selectData="selectData"
            :activeName="activeName" @reGetMTTableInfo="reGetMTTableInfo"></CBMPlan>


        <MSComponent @CloseTables="MSComponentFlg = false" v-if="MSComponentFlg && activeName == 'second'">
        </MSComponent>

        <DA @CloseTables="MSComponentFlg = false" @reGetMTTableInfo="reGetMTTableInfo"
            v-if="MSComponentFlg && activeName == 'third'"></DA>

        <ASetTable @CloseTables="ASetTableFlg = false" @reGetPlTableInfo="reGetPlTableInfo" v-if="ASetTableFlg">
        </ASetTable>

        <BSetTable @CloseTables="BSetTableFlg = false" @reGetMSTableInfo="reGetMSTableInfo" v-if="BSetTableFlg">
        </BSetTable>

        <CSetTable @CloseTables="CSetTableFlg = false" @reGetMTTableInfo="reGetMTTableInfo" v-if="CSetTableFlg">
        </CSetTable>

        <!-- 右侧弹框-抽出条件 -->
        <PlanConditions class="plan-c" @CloseRightTables="showRight" v-if="activeName == 'first'"
            @reGetPlTableInfo="reGetPlTableInfo" :timeFlg="timeFlg" ref="planConditions"></PlanConditions>
        <VisualConditions class="plan-c" @CloseRightTables="showRight" v-if="activeName == 'second'"
            @reGetMSTableInfo="reGetMSTableInfo" :timeFlg="timeFlg" ref="visualConditions"></VisualConditions>
        <TicknessConditions class="plan-c" @CloseRightTables="showRight" v-if="activeName == 'third'"
            @reGetMTTableInfo="reGetMTTableInfo" ref="ticknessConditions"></TicknessConditions>
    </div>
</template>

<script>
import DA from "../components/Plan/mnues/D_A";
import MSComponent from "../components/Plan/mnues/MSComponent";
import PlanContent from "../components/Plan/PlanContent";
import TBMPlan from "../components/Plan/Dialog/TBMPlan";
import TBMPlanTwo from "../components/Plan/Dialog/TBMPlanTwo";
import TBMPlanThird from "../components/Plan/Dialog/TBMPlanThird";
import HANPlan from "../components/Plan/Dialog/HANPlan";
import HANPlanTwo from "../components/Plan/Dialog/HANPlanTwo";
import HANPlanThird from "../components/Plan/Dialog/HANPlanThird";
import RenewThird from "../components/Plan/Dialog/RenewThird";
import DelPlan from "../components/Plan/Dialog/DelPlan";
import DelPlanTwo from "../components/Plan/Dialog/DelPlanTwo";
import DelPlanThird from "../components/Plan/Dialog/DelPlanThird";
import AUTPlan from "../components/Plan/Dialog/AUTPlan";
import CBMPlan from "../components/Plan/Dialog/CBMPlan";
import PlanConditions from "../components/Plan/PlanConditions";
import VisualConditions from "../components/Plan/VisualConditions";
import TicknessConditions from "../components/Plan/TicknessConditions";
import MSPlanContent from "../components/Plan/MSPlan/MS_PlanContent";
import MTPlanContent from "../components/Plan/MSPlan/MT_PlanContent";
import ASetTable from "../components/Plan/mnues/ASetTable"
import BSetTable from "../components/Plan/mnues/BSetTable"
import CSetTable from "../components/Plan/mnues/CSetTable"
import $ from "jquery";

import eventBus from "../eventBus/bus";
import { getLocalStorage } from "@/utils/storage";

import {
    getPlant,
    GetInitSlct, GetFortificationsList, GetTBMStdJudgeSection
} from "@/api/api";

// 导出模块
export default {
    // 模块名字
    name: "BHView",
    // 模块数据
    data() {
        //数据
        return {
            isUserNull: false,
            ASetTableFlg: false,
            BSetTableFlg: false,
            CSetTableFlg: false,
            VisualDetailPlanCombox: 'リスト',
            MSComponentFlg: false,
            macTypeOption: [{ key: 1, value: '機器' }, { key: 2, value: '配管' }],
            macType: this.$store.state.macType,
            // new
            plantOptions: [], //装置
            TabelCompontensFlag: 0, //弹框
            rightConpontensFlag: 0, //右侧弹框
            activeName: "first",
            timeFlg: 0,
            isDisabled: true,
            selectData: [],
            //-----
            topMsBtnDownList: [
                {
                    topBtnName: this.$t("message.bhView.topBtnDownList.view"),
                    type: "MS",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.pointDisplay"
                            ),
                            disabled: true,
                            activeName: 'second',
                            isShow: ['third'],
                        },
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.selectDisplayItems"
                            ),
                            disabled: true,
                            isShow: ['first', 'second', 'third'],
                        },
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.MS_Two"
                            ),
                            disabled: true,
                            activeName: 'second',
                            isShow: [''],
                        }
                    ]
                }
            ],
            downBtnActive: null,
            valuePlant: "",
            macName: "",
            name: "",
            numberData: 0,
            leftTabelRow: {},
            leftReadTabelRow: {},
            MSTabelCompontensFlag: false,
            MSDetailTabelCompontensFlag: false,
            ReadingTabelCompontensFlag: false,
            AdditionalInformationFlag: false,
            ChartsConfigFlag: false,
            downBtnActiveX: null,
            readingName: {
                macName: "",
                name: ""
            },
            styleOptionsValue: 3,

            AddBasicStyleIsShow: false,
            AddBasicStylePipingIsShow: false,

            allInfo: [],
            Acc: getLocalStorage("userName"),

        };
    },

    computed: {
        toMarkupBtnIsDisable() {
            if (this.activeName === "first") {
                let tempCode = this.$store.state.bhStyleCode;
                if (tempCode == 2) return false;
            } else if (this.activeName === "second") {
                let tempCode = this.$store.state.msStyleCode;
                if (tempCode == 2) return false;
            } else if (this.activeName === "third") {
                let tempCode = this.$store.state.msDetailStyleCode;
                if (tempCode == 2) return false;
            }
            return true;
        }
    },

    // 注册组件
    components: {
        ASetTable,
        BSetTable,
        CSetTable,
        DA,
        MSComponent,
        PlanContent,
        TBMPlan,
        TBMPlanTwo,
        TBMPlanThird,
        HANPlan,
        HANPlanTwo,
        HANPlanThird,
        RenewThird,
        DelPlan,
        DelPlanTwo,
        DelPlanThird,
        AUTPlan,
        CBMPlan,

        PlanConditions,
        VisualConditions,
        TicknessConditions,

        MSPlanContent,
        MTPlanContent,


    },
    // 监听指定值，只有指定值变化，才会触发
    watch: {
        //切换标签取消弹框和选择的数据
        activeName: {
            immediate: true,
            handler(nVal, oVal) {
                this.selectData = [];
                this.TabelCompontensFlag = 0;
                if (nVal == 'third') {
                    this.selectData = [1];
                }
            }
        },
        //监听选择的数据数据为空禁止按钮
        selectData: {
            immediate: true,
            handler(nVal, oVal) {
                if (nVal.length == 0) {
                    this.isDisabled = true;
                } else {
                    this.isDisabled = false;
                }
            }
        },
    },
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        //清空用户设置
        clearUserSet() {
            this.$confirm('抽出条件を解除します。良いですか？', '', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                if (this.activeName == 'first') {
                    this.$refs.PlanContent.getOfferHeaderObjctlApi(true);
                    setTimeout(() => {
                        this.$refs.planConditions.GetFortificationsUserCodSourceApi();
                    }, 500);
                }
                if (this.activeName == 'second') {
                    this.$refs.MSCPlanContent.getOfferHeaderObjctlApi(true);
                    setTimeout(() => {
                        this.$refs.visualConditions.GetVisualDetailPlanCodSourceApi();
                    }, 500);
                }
                if (this.activeName == 'third') {
                    this.$refs.MTCPlanContent.getOfferHeaderObjctlApi(true);
                    setTimeout(() => {
                        this.$refs.ticknessConditions.GetThckDeterPlanCondSetApi();
                    }, 500);
                }
            }).catch(() => {

            });
        },
        //是否抽出条件为空
        isUserEmpty(e) {
            this.isUserNull = e;
            console.log(this.isUserNull, "QQQQQQQQQQQQQQQQQQQQQQQQQQQqq")
        },
        //时间范围-TMB
        async GetTBMStdJudgeSectionApi() {
            let res = await GetTBMStdJudgeSection({});
            localStorage.setItem("startTimeTMB", Date.parse(res.data.data[0]))
            localStorage.setItem("endTimeTMB", Date.parse(res.data.data[res.data.data.length - 1]))
        },
        //重新获取计划表格内的数据
        reGetPlTableInfo() {
            console.log("SSSSSSSSSSSSSS")
            this.$refs.PlanContent.getOfferHeaderObjctlApi();
            this.selectData = [];
        },
        //重新获取目视表格内的数据
        reGetMSTableInfo() {
            this.$refs.MSCPlanContent.getOfferHeaderObjctlApi();
            this.selectData = [];
        },
        //重新获取目视表格内的数据
        reGetMTTableInfo() {
            this.$refs.MTCPlanContent.getOfferHeaderObjctlApi();
            this.selectData = [];
        },
        changePltCode(e) {
            console.log(e)
            this.$store.commit("changePltCode", e)
            // 更新保存的装置code
            this.$store.commit("changePltCode", this.valuePlant);
            // 更新保存的装置name
            this.plantOptions.forEach((Item) => {
                if (Item.pltCode == e) {
                    let valuePlant = Item.pltName;
                    this.$store.commit("changePlantName", valuePlant);
                    this.$store.commit("changePrnCode", Item.prnCode);
                }
            });
            if (this.activeName == 'first') {
                this.reGetPlTableInfo();
            }
            if (this.activeName == 'second') {
                this.reGetMSTableInfo();
            }
            if (this.activeName == 'third') {
                this.reGetMTTableInfo();
            }
        },
        changeMacType(e) {
            console.log(e)
            this.isDisabled = true;
            this.$store.commit("changeMacType", e)
            if (this.activeName == 'first') {
                this.reGetPlTableInfo();
            }
            if (this.activeName == 'second') {
                this.reGetMSTableInfo();
            }
            if (this.activeName == 'third') {
                this.reGetMTTableInfo();
            }
        },
        getSelecData(e) {
            if (e.length == 0) {
                this.isDisabled = true;
            } else {
                this.isDisabled = false;
            }
            this.selectData = e;
        },
        showRight() {
            console.log(this.activeName);
            // 0为显示，-716为隐藏
            if ($(".plan-c").css("right") == "20px") {
                console.log(111);

                $(".plan-c").animate({ right: -716 }, 300);
            } else {
                $(".plan-c").animate({ right: 20 }, 300);
                console.log(222);
                if (this.activeName == 'first') {
                    setTimeout(() => {
                        this.$refs.planConditions.GetFortificationsCodSourceAPi();
                    }, 200);
                }
                if (this.activeName == 'second') {
                    setTimeout(() => {
                        this.$refs.visualConditions.GetVisualDetailPlanCodSourceApi();
                    }, 200);
                }
                if (this.activeName == 'third') {
                    setTimeout(() => {
                        this.$refs.ticknessConditions.initFn();
                    }, 200);
                }
            }
        },
        showDialog(flg) {
            if (this.TabelCompontensFlag != 0) return;
            this.TabelCompontensFlag = flg;
        },

        /**
         * 获取 [年月日]的初始选择
         */
        GetInitSlctAPi() {
            let dataJson = {
                Acc: this.Acc
            }
            GetInitSlct(dataJson).then((res) => {
                console.log(res, "返回的数据（int，0=年表示 1=月表示）")
                this.timeFlg = res.data.data;
            })
        },

        changeYear() {
            //0年1月
            this.timeFlg = this.timeFlg == 0 ? 1 : 0;
        },
        //   new
        // 获取装置
        getPlantApi(pageIndex = 1, pageSize = 1000) {
            let dataJson = {
                pltCode: 0,
                platName: "",
                pageIndex: pageIndex,
                pageSize: pageSize
            };
            getPlant(dataJson).then(res => {
                this.plantOptions = [];
                if (res.data.code != 0) {
                    this.valuePlant = null;
                    this.$store.commit("changePltCode", null);
                    return;
                }
                this.plantOptions = res.data.data;

                let filterFlg = this.plantOptions.filter(item => item.pltCode == this.$store.state.pltCode);
                if (this.$store.state.pltCode && filterFlg.length > 0) {
                    this.valuePlant = this.$store.state.pltCode;
                } else {
                    this.valuePlant = this.plantOptions[0].pltCode;
                    this.$store.commit("changePltCode", this.valuePlant);
                }
            });
        },

        // checkTopMenuByUserData() {
        //     let userData = getLocalStorage("userData");
        //     let resultPermiss = userData.resultPermiss == 2;

        //     this.topBtnDownList.forEach(listE => {
        //         listE.downList.forEach(subE => {
        //             if (subE.disableByResult) {
        //                 subE.disabled = resultPermiss;
        //             }
        //         });
        //     });

        //     this.topMsBtnDownList.forEach(listE => {
        //         listE.downList.forEach(subE => {
        //             if (subE.disableByResult) {
        //                 subE.disabled = resultPermiss;
        //             }
        //         });
        //     });

        //     this.topMsDetailBtnDownList.forEach(listE => {
        //         listE.downList.forEach(subE => {
        //             if (subE.disableByResult) {
        //                 subE.disabled = resultPermiss;
        //             }
        //         });
        //     });

        //     this.topYLBtnDownList.forEach(listE => {
        //         listE.downList.forEach(subE => {
        //             if (subE.disableByResult) {
        //                 subE.disabled = resultPermiss;
        //             }
        //         });
        //     });

        //     this.topBSDownList.forEach(listE => {
        //         listE.downList.forEach(subE => {
        //             if (subE.disableByResult) {
        //                 subE.disabled = resultPermiss;
        //             }
        //         });
        //     });
        // },


        handleClick(tab, event) {

        },
        //下拉菜单标记颜色
        BtnActive(index) {
            this.downBtnActive = index;
        },
        //二级菜单点击事件
        dropDownMenu(item, type) {
            console.log(item, type);
            if (
                item.itemName ==
                this.$t("message.bhView.topBtnDownList.selectDisplayItems") && this.activeName == 'first'
            ) {
                this.ASetTableFlg = true;
            }

            if (
                item.itemName ==
                this.$t("message.bhView.topBtnDownList.MS_Two") && this.activeName == 'second'
            ) {
                this.MSComponentFlg = true;
            }

            if (
                item.itemName ==
                this.$t("message.bhView.topBtnDownList.pointDisplay") && this.activeName == 'third'
            ) {
                this.MSComponentFlg = true;
            }

            if (
                item.itemName ==
                this.$t("message.bhView.topBtnDownList.selectDisplayItems") && this.activeName == 'second'
            ) {
                this.BSetTableFlg = true;
            }
            if (
                item.itemName ==
                this.$t("message.bhView.topBtnDownList.selectDisplayItems") && this.activeName == 'third'
            ) {
                this.CSetTableFlg = true;
            }
            //   }
            console.log(item.itemName, type, this.activeName)
        },

    },
    // 创建完毕状态(里面是操作)
    created() {
        this.GetInitSlctAPi();
        this.getPlantApi();

    },
    // 挂载结束状态(里面是操作)
    mounted() {
        this.GetTBMStdJudgeSectionApi();


        // this.checkTopMenuByUserData();
    },
    // 销毁前状态(里面是操作)
    beforeDestroy() {

    }
};
</script>

<style lang="scss" scoped>
.View {
    width: calc(100% - 192px);
    height: 100%;

    .all-content-warrper {
        width: 100%;
        height: calc(100% - 55px);
    }

    .title-view {
        width: calc(100% - 48px);
        background: #f8f8f8;
        border-bottom: 1px solid #e1e1e1;
        margin-left: 24px;

        .top-tab {
            display: flex;
            width: 100%;
            height: 55px;
        }

        .btn-box {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .top-btn-view {
            height: 48px;
            display: flex;
            align-content: center;
            justify-content: space-between;

            .tab-btn {
                min-width: 60px;
                height: 32px;
                text-align: center;
                line-height: 32px;
                color: rgba(0, 0, 0, 0.65);
                margin-right: 2px;
                border-radius: 2px;
                transition: 0.5s;
            }

            .tab-btn:hover {
                background: rgba(33, 61, 73, 0.05);
            }

            .downBtnActive {
                background: rgba(33, 61, 73, 0.05);
            }
        }

        .bottom {
            width: calc(100% - 256px);
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            // margin-left: 120px;
            .bottom-left-view {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                height: 52px;
            }

            .bottom-right-view {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                height: 52px;

                button {
                    min-width: 52px;
                    height: 24px;
                    border-radius: 4px;
                    border: 1px solid #d3d3d3;
                    margin-left: 16px;
                }

                .bg-bottom-btn {
                    // background: #106ebe;
                    // color: #ffffff;
                    padding: 0 8px;
                }

                .red {
                    background: #106ebe;
                    color: #bc000f;
                    padding: 0 8px;
                }

                .edit-btn {
                    color: #fff;
                    background: #bc000f;
                    border: 0;
                }
            }

            .b-input {
                display: flex;
                align-items: center;
                height: 100%;
                margin-right: 24px;

                .b-input-label {
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.85);
                    height: 24px;
                    line-height: 24px;
                }

                .selectInput {
                    width: 224px;
                    height: 24px;
                }

                .selectInputlong {
                    width: 384px;
                    margin-left: 8px;

                    ::v-deep .el-input__inner {
                        width: 384px;
                    }
                }

                ::v-deep .el-input__inner {
                    width: 224px;
                    height: 24px;
                    color: rgba(0, 0, 0, 0.65);
                    background: #f8f8f8;
                }

                ::v-deep .el-input__icon {
                    line-height: 24px;
                }
            }

            .DViewer {
                margin-left: 8px;
                min-width: 52px;
                height: 24px;
                // border-radius: 4px;
                // border: 1px solid #d9d9d9;
                display: flex;
                align-items: center;
                justify-content: center;

                // cursor: pointer;
                .iconfont {
                    font-size: 24px;
                    margin: 0 4px;
                    color: #2a7190;
                    cursor: pointer;
                }
            }
        }
    }

    .leftTabel-rightTabel-lineContent {
        width: 100%;
        height: calc(100% - 45px);
        display: flex;
        justify-content: flex-start;

        .left {
            width: 264px;
            height: 100%;
        }

        .right {
            width: calc(100% - 264px);
            padding: 0 16px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .wide-right {
            width: 100%;
            padding: 0 16px 0 24px;
        }
    }
}

.tip-view {
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin: 14px 0;
    justify-content: space-between;

    * {
        margin-right: 25px;
    }

    .tip-label {
        margin-right: 5px;
    }

    ::v-deep .el-button {
        min-width: 52px;
        // height: 24px;
        border-radius: 4px;
        // border: 1px solid #d3d3d3;
        margin: 0 14px 0 0 !important;
    }

    .bg-bottom-btn {
        // background: #106ebe;
        // color: #ffffff;
        padding: 5px 12px;
        height: 26px !important;
    }

    .bg-bottom-btn:last-child {
        float: right;
    }

    .edit-btn {
        color: #fff;
        background: #bc000f;
        border: 0;
    }

    .form-ipt {
        width: 200px;
        height: 26px;

        ::v-deep .el-input__inner {
            height: 26px;
            background: #fff;
        }

        ::v-deep .el-input__icon {
            line-height: 26px;
        }
    }
}

.bh-tab {
    width: 100%;

    // height: 100%;
    ::v-deep .el-tabs__header {
        margin: 14px 24px 0 24px;
        width: calc(100% -48px);
    }

    ::v-deep .el-tabs__content {
        height: calc(100% - 55px);
    }

    ::v-deep #pane-first {
        height: 100%;
    }

    ::v-deep #pane-second {
        height: 100%;
    }

    ::v-deep #pane-third {
        height: 100%;
    }
}

.drop-btn {
    background: transparent;
    border: 0 none;
}

::v-deep .el-button.is-disabled,
::v-deep .el-button.is-disabled:hover {
    background: #ebeef5 !important;
    color: #c0c4cc !important;
}

::v-deep .el-button.is-disabled,
::v-deep .el-button.is-disabled:hover {
    background: #ebeef5 !important;
    color: #c0c4cc !important;
}

.el-icon-search,
.el-icon-document-checked {
    font-size: 20px;
    color: #2a7190;
    cursor: pointer;
    line-height: 100%;
}

.el-icon-search {
    font-size: 14px;
    padding: 5px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}

// ::v-deep .el-dropdown-menu .el-button.is-disabled,
//   ::v-deep .el-dropdown-menu .el-button.is-disabled:hover {
//     background: transparent !important;
//   }

.plan-c {
    position: absolute;
    width: 560px;
    height: calc(100% - 198px);
    background: #fff;
    right: -716px;
    bottom: 0;
    z-index: 99999;

    .get-url-view {
        position: absolute;
        z-index: 666;
        bottom: 10px;
        left: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 80%;
    }
}
</style>
